<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/x-icon" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dictionary App</title>
  </head>
  <body class="flex flex-col h-full min-h-screen">
    <!--Header-->
    <header class="bg-sky-600 py-9">
      <p class="text-2xl font-semibold text-center text-white">
        Free English Dictionary
      </p>
    </header>

    <!--Main Section-->
    <main class="container flex flex-col flex-grow gap-4 mx-auto my-4">
      <!--Search-->
      <section class="flex items-center justify-center py-6">
        <div class="flex-grow">
          <input
            class="w-full px-4 py-2 border-2 border-r-0 border-stone-200"
            id="input"
            placeholder="Enter a word"
            type="text"
            value="Hello"
          />
        </div>
        <div class="flex-shrink">
          <button id="submit" class="px-6 py-2 text-xl text-white bg-sky-600">
            Define
          </button>
        </div>
      </section>

      <!--Phonetics-->
      <section id="phonetics" class="flex flex-col gap-4">
        <h1 class="text-2xl font-semibold">Phonetics</h1>

        <div class="bg-stone-100">
          <p class="px-4 py-3 text-white bg-stone-700">/həˈloʊ/</p>
          <audio controls style="width: 100%">
            <source
              src="https://api.dictionaryapi.dev/media/pronunciations/en/hello-au.mp3"
              type="audio/mpeg"
            />
            Your browser does not support the audio element.
          </audio>
        </div>

        <div class="bg-stone-100">
          <p class="px-4 py-2 text-white bg-stone-700">/hɛ'loʊ/</p>
          <audio controls="true" style="width: 100%">
            <source
              src="https://api.dictionaryapi.dev/media/pronunciations/en/hello-uk.mp3"
              type="audio/mpeg"
            />
            Your browser does not support the audio element.
          </audio>
        </div>
      </section>

      <!--Definitions-->
      <section id="definitions" class="flex flex-col gap-4 mt-6">
        <h1 class="text-2xl font-semibold">Definitions</h1>

        <div class="bg-sky-50">
          <p class="px-4 py-2 font-semibold text-white bg-sky-600">
            Exclamation
          </p>
          <ul class="p-2 ml-6 font-light list-disc text-sky-700">
            <li>Used as a greeting or to begin a phone conversation.</li>
          </ul>
        </div>

        <div class="bg-sky-50">
          <p class="px-4 py-2 font-semibold text-white bg-sky-600">Noun</p>
          <ul class="p-2 ml-6 font-light list-disc text-sky-700">
            <li>An utterance of "hello"; a greeting.</li>
          </ul>
        </div>

        <div class="bg-sky-50">
          <p class="px-4 py-2 font-semibold text-white bg-sky-600">
            Intransitive Verb
          </p>
          <ul class="p-2 ml-6 font-light list-disc text-sky-700">
            <li>Say or shout "hello"; greet someone.</li>
          </ul>
        </div>
      </section>
    </main>

    <!--Footer-->
    <footer class="mt-8 bg-stone-50">
      <div class="py-12 text-center text-stone-950">
        This program uses the
        <a href="https://dictionaryapi.dev/" target="_blank" class="underline"
          >Free Dictionary API</a
        >.
      </div>
    </footer>

    <!-- Scripts here. Don't remove ↓ -->
    <script type="module" src="src/main.ts"></script>
  </body>
</html>